<script lang="ts" setup>
// 引入 echarts
import { ProductRevenuShare } from '@/assets/api/ecommercedataanalysisservice_0_0_1';
import { fitChartSize } from '@/utils/flex-size-utrils';
import * as echarts from 'echarts';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';


const props = defineProps<{
    product_revenu_share_datas: Array<ProductRevenuShare>
}>();

// 创建 dom 的对象
const chart = ref<HTMLDivElement>();

// chart 的对象实例
let myChart: echarts.ECharts | undefined;

const datas: {
    series_data: Array<any>
} = {
    series_data: []
}


watch(() => props.product_revenu_share_datas, () => {
    datas.series_data = []
    // 构建字符串
    for (let ele of props.product_revenu_share_datas) {
        datas.series_data.push({
            value: (ele.share*100).toFixed(2),
            name: ele.category,
        })
    }
    doRender()

});


const doRender = () => {
    let option = {
        // 设置标题
        title: [
            {
                text: '产品销售额占比',
                textStyle: {
                    fontSize: fitChartSize(14), // 标题的文字大小
                    color: "white"
                },

            }
        ],
        // 配置系列数据
        series: [
            {
                // data: [        // 定义系列中的数据
                //     { value: 30, name: '手机' },
                //     { value: 25, name: '笔记本' },
                //     { value: 15, name: '美妆' },
                //     { value: 20, name: '衣服' },
                //     { value: 10, name: '耳机' }
                // ],
                data:datas.series_data,
                type: 'pie',    // 系列类型为柱状图
                radius: '60%',
                center: ['50%', '50%'],
                label: {
                normal: {
                    show: true, // 显示标签
                    position: 'outside', // 标签显示在扇区外侧
                    formatter: '{b} {c}%', // 标签内容，{c} 是数据的值，这里显示为百分比
                    color: 'white' // 标签的文字颜色
                }
            }
            }
        ],

    };
    // 使用配置项生成图表
    myChart.setOption(option);
}
// 
const onHandlerWindowResize = () => {
    if (!myChart) {
        return;
    }
    // 重新设置字体大小   
    doRender();
    // 调整大小
    myChart.resize();
};

// 组件加载完成后加载的对象
onMounted(() => {
    // 固定用法，需要使用 chart.value
    myChart = echarts.init(chart.value);
    // 渲染出来
    doRender();
    // 监听窗口大小变化的事件
    window.addEventListener('resize', onHandlerWindowResize);
});
onBeforeUnmount(() => {
    // 组件销售时,退出监听
    window.removeEventListener('resize', onHandlerWindowResize);
});
</script>

<template>
    <!-- ref 是一个 就是获取到 dom 对象 -->
    <div class="year-revenu-chart-wrapper">
        <div ref="chart" class="year-revenu-chart"></div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss/flex-layout.scss";

.year-revenu-chart-wrapper {
    width: 100%;
    height: 100%;
    background: transparent;
    padding: vw(10);

    .year-revenu-chart {
        width: 100%;
        height: 100%;
        padding: vw(10);
        // 设置又名都
        background: rgba(42, 30, 55, 0.3);
    }
}
</style>